<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.引出生命周期</title>
		<!-- 引入开发版本的Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			生命周期：
					1.又称为：生命周期回调函数、生命周期函数、生命周期钩子。
					2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
					3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
					4.生命周期函数中的this指向是vm 或 组件实例对象。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 :style="{opacity:tmd}">欢迎学习Vue</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				tmd:1
			},

			//挂载完毕（vm将工作成果放入了root容器）
			mounted(){
				console.log('挂载完毕',this)
				setInterval(()=>{
					vm.tmd -= 0.1
					if(vm.tmd <= 0) vm.tmd = 1
				},200)
			},

		})

		

	</script>
</html>